<template>
	<view class="app">
		<!-- 顶部栏 -->

		<!-- #ifndef MP-WEIXIN -->
		<page-header :showFillView="false"></page-header>
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			:top="headerHeight" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadHotList" 
		>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-header :showFillView="true"></page-header>
		<!-- #endif -->
		<!-- 头部轮播图 -->
		<banner :list="carousel"></banner>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="item" v-for="item in navList" :key="item.id" @click="navTo(item.link)">
				<image class="icon-button" :src="item.image"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>

		<!-- 热门推荐 -->
		<view class="hot-wrap" :class="{show: true}">
			<view class="floor-header row" @click="navTo('/pages/product/list?isHot=1')">
				<image class="icon" src="/static/icon/hot.png"></image>
				<view class="column fill">
					<text class="tit">热门推荐</text>
					<text>Popular Recommendation</text>
				</view>
				<text class="mix-icon icon-you"></text>
			</view>
			
			<view class="item " v-for="item in hotList" :key="item.id" @click="navTo('/pages/product/detail?id=' + item.id)">
				<view class="icon-txt">
					<view class="icon-image" v-if="item.courseImg">
						<image class="icon" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+item.courseImg" mode="aspectFill"></image>
					</view>
					<view class="tit">
						<view class="title">{{ item.courseName }}</view>
						<view class="teacher">
							<span class="teacherName">{{ item.username }}</span>
							<span class="teacherName">{{ item.degree }}</span>
						</view>
						<view>
							<span class="maney">{{ item.price }}</span>
							<span class="type">{{ item.courseType }}</span>
						</view>
			
					</view>
				</view>
			</view>
		</view>
		<view v-if="hotList.length===0" class="image-bg ">
			<view class="center">
				<image src="../../static/icon/default-avatar.png" class="img-png"></image>
			</view>
			<view class="img-text">空空如也</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		</mescroll-body>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<mix-load-more v-if="hotList.length" :status="2"></mix-load-more>
		<!-- #endif -->
	</view>
</template>

<script>
	import tabbarMixin from './mixin/tabbar' 
	import homeMixin from './mixin/home'
	import pageHeader from './components/page-header.vue'
	import banner from './components/banner.vue'
	import productList from '@/pages/product/components/product-list.vue'

	export default {
		components: {
			pageHeader,
			banner,
			productList
			
		},
		mixins: [homeMixin, tabbarMixin],
		data() {
			return {
				navList: [
					{
						id:1,
						name:'报名流程',
						image:'../../static/button/process.png',
						link:'/pages/process/process'
					},
					{
						id:2,
						name:'师资力量',
						image:'../../static/button/faculty.png',
						link:'/pages/faculty/faculty'
					},
					{
						id:3,
						name:'精选文章',
						image:'../../static/button/articles.png',
						link:'/pages/article/article'
					},
					{
						id:4,
						name:'关于我们',
						image:'../../static/button/about.png',
						link:'/pages/about/about'
					}
				],//导航列表
				advertList: [],//广告列表
				hotList: [],//热门推荐
			}
		},
		computed: {
			recommendedList(){
				return this.$store.state.recommendedList;
			}
		},
		watch: {
			recommendedList(){
				const  courseList = this.recommendedList;
				if(courseList.length>5){
					this.hotList = courseList.slice(0,5)
				}else{
					this.hotList = courseList
				}
			}
		},
		onLoad() {
			const  courseList = this.recommendedList
			if(courseList.length>5){
				this.hotList = courseList.slice(0,5)
			}else{
				this.hotList = courseList
			}
		},
		methods: {

		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	/* 分类 */
	.cate-section {
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		padding: 10rpx 16rpx; 
		background: #fff;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #333;
		}
		.icon-button {
			width: 84rpx;
			height: 84rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
		}
	}
	.mid-ad{
		width: 100%;
		height: 208rpx;
		padding: 0 20rpx 20rpx;
		background: #fff;
		
		image{
			width:100%;
			height: 100%; 
		}
	}
	.floor-header{
		padding: 6rpx 30rpx 8rpx 24rpx;
		font-size: 24rpx;
		color: #999;
		background-color: #fff;
		
		.icon{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			margin-bottom: 10rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
		}
		.icon-you{
			font-size: 28rpx;
			color: #999;
		}
	}
	.hot-wrap{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	.cate-image{
		width: calc(100% - 40rpx);
		height: 200rpx;
		margin: 0 20rpx;
		border-radius: 8rpx;
	}
	.wrap{
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx 20rpx;
	}
	.item{
		// flex-shrink: 0;
		// justify-content: flex-start;
		// align-items: center;
		// width: 50%;
		// padding: 30rpx 0 0;
		
		// &:nth-child(3n-1){
		// 	width: 40%;
		// }
	}
	.cate-text{
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		border-radius: 8rpx;
	}
	.icon-txt{
		width: calc(100% - 20rpx);
		height:180rpx;
		margin: 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		// background-color: #07C160;
	}
	.icon{
		width: 120rpx;
		height: 170rpx;
		line-height: 148rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}
	.icon-image{
		float: left;
		// background-color: #0081FF;
		border-radius: 8rpx;
	}
	.tit{
		
	}
	.title{
		font-size: 36rpx;
		color: #000;
	}
	.type{
		font-size: 20rpx;
		color:#969696;
		float: right;
	}
	.maney{
		font-size: 28rpx;
		color:#E1251B;
	}
	.teacher{
		margin-bottom: 5rpx;
	}
	.teacherName{
		background-color: #e5e5e5;
		color: #969696;
		margin-right:15rpx;
		font-size: 18rpx;
	}
	.image-bg{
	
		text-align: center;
		border-radius: 6rpx;
		.img-text{
			font-size: 16rpx;
			color: #82939C;
		}
	}
	.img-png{
		text-align: center;
		width: 160rpx;
		height: 160rpx;
	}
</style>
